var socket;
var puerto = 3000;

function loadScript() {
    console.log(themeUrl);
//    var url = "js/plugin/highcharts/js/highcharts.js";
//    $.getScript(url);
    //BOOTSTRAP 3
//    arduino_led\bootstrap-3.3.2\dist\js
//    var url = "http://192.168.0.103/arduino_led/bootstrap/js/bootstrap.min.js";
//    $.getScript(url);
//    var url = "http://192.168.0.103/arduino_led/bootstrapcss/bootstrap-theme.min.css";
//    var cssLink = $("<link rel='stylesheet' type='text/css' href='" + url + "'>");
//    $("head").append(cssLink);

//    var url = "http://192.168.0.103/arduino_led/bootstrap/css/bootstrap.min.css";
//    var cssLink = $("<link rel='stylesheet' type='text/css' href='" + url + "'>");
//    $("head").append(cssLink);
}


$(function() {
    window.client = io.connect("http://" + document.location.hostname + ":" + puerto);
//    loadScript();
//    socket = io.connect('http://192.168.0.103:3000');
    socket = io("http://" + document.location.hostname + ":" + puerto);

    initComponents();

});
function mensaje(msj) {
//    alert(msj);
//    var socket = io("http://" + document.location.hostname + ":3000"), notif;
//    var cw = Raphael.colorwheel($(".colorwheel_large")[0], 300, 180);
//    cw.input($("input")[0]);
//    cw.onchange(function(data) {
//        socket.emit('changeColor', data);
//    });
//    socket.on('retorno', function(data) {
//        console.log(data.hex);
//    });
}



function initComponents() {
    $('#Entidad_nombre').knob({
        change: function(value) {
            //console.log("change : " + value);
//            data = {usuario_correcto: true};
            socket.emit("luminosidad_verde", value, function(data) {
                console.log(data);
                viewHighchart("usersColumn", data);


            });
        },
        release: function(value) {
            //console.log(this.$.attr('value'));
            //console.log("release : " + value);
        },
        cancel: function() {
            //console.log("cancel : ", this);
        }
    });

    $('#Entidad_id').knob({
        change: function(value) {
            //console.log("change : " + value);

            socket.emit("luminosidad_rojo", value, function(data) {
                console.log(data);
//                viewHighchart("usersColumn", data);


            });
        },
        release: function(value) {
            //console.log(this.$.attr('value'));
            //console.log("release : " + value);
        },
        cancel: function() {
            //console.log("cancel : ", this);     }
        }});
    socket.on('connected', function() {
        console.log('Conectado al servidor!');
//        info = {cambiarDatos: false};
        socket.emit('mostrarInfo', $("#Entidad_nombre").val(), function(data) {
            $data = getHighchart();
            $("#usersColumn").highcharts($data);
            viewHighchart("usersColumn", data);
        });
        socket.emit("luminosidad_rojo", $("#Entidad_nombre").val(), function(data) {
            console.log(data);
//                viewHighchart("usersColumn", data);


        });

        socket.on("mostrar", function(data) {
            console.log(data);
//                viewHighchart("usersColumn", data);


        });

    });
    $('#btnIngresar').on('click', function() {
        if (verificarUsuario()) {
            mensaje("Usuario Correcto");
            data = {usuario_correcto: true};
            socket.emit("click", data, function(data) {
                console.log(data);
            });
            //ViaAjax
            $url = "/?LED=T";
            enviarDatosServidor($url);
            //SUBMIT PAGINA
//            $("#logon-form").attr("action", "?LED=T");
//            $("#logon-form").submit();
        }
        else {
            mensaje("Usuario incorrecto.");
            data = {usuario_correcto: false};
            socket.emit("click", data, function(data) {
                console.log(data);
            });
            //AJAX
            $url = "/?LED=F";
            enviarDatosServidor($url);
//            //SUBMIT PAGINA
//            $("#logon-form").attr("action", "?LED=F");
//            $("#logon-form").submit();
        }

    });

    socket.on('retorno', function(data) {
        console.log(data);
        viewHighchart("usersColumn", data);

    });

    socket.on('mostrar', function(data) {
        console.log(data);
    });
    socket.on('estado_boton', function(data) {
        console.log(data);

        $('#Entidad_id').val(data);
//        viewHighchart("usersColumn", data);

    });
    socket.on('prendido_azul', function(data) {
        console.log(data);

//        viewHighchart("usersColumn", data);

    });

    socket.on('disconnect', function() {
        console.log('Desconectado!');
//        toggle();
    });
}



//0996643586
function viewHighchart($div_contenedor_id, data) {
    $div_nombreId = "#" + $div_contenedor_id;
//    $($div_contenedor_id).highcharts(data);
    console.log(data);
    if (data.mostrar) {//SOLO SI UBO CAMBISO MODIFICAR
        if (data.numeros > 0) {//A LA primera ves de enviar datos
            $usersColums = $($div_nombreId).highcharts();
            if ($usersColums != undefined) {
                viewDivsContenedoresCharts($div_nombreId, true);
                $usersColums.series[0].setData([data.numeros]);
            }


        }

    }
    else {//sin ningun cambio

        viewDivsContenedoresCharts($div_nombreId, false);

    }
}
function viewDivsContenedoresCharts($id_div, $mostrar) {
    if ($mostrar) {//Mostrar los divs contenedores y ocultar el div de vacio
        if ($($id_div).hasClass("hidden")) {
            $($id_div).removeClass("hidden");
        }
        if (!$($id_div + "Empty").hasClass("hidden")) {
            $($id_div + "Empty").addClass("hidden");
        }

    }
    else {
        if (!$($id_div).hasClass("hidden")) {
            $($id_div).addClass("hidden");
        }
        if ($($id_div + "Empty").hasClass("hidden")) {
            $($id_div + "Empty").removeClass("hidden");
        }
    }

}
function getHighchart() {

    $columns = {
        title: {text: ""},
        credits: {
            enabled: false
        },
        chart: {
            marginTop: "35",
            height: "320",
            type: "column"
        },
        plotOptions: {
            column: {
                depth: 70
            }},
        tooltip: {
            pointFormat: "{series.name}: <b>{point.y:.2f}<\/b>"
        },
        xAxis: {
            categories: ["Nivel de Luminosidad"]
        },
        yAxis: {
            title: {
                text: "Nivel Luminosidad"},
            allowDecimals: true
        },
        series:
                [
                    {
                        name: "Luminosidad",
                        data: [0]
                    }
                ],
    };
    return $columns;
}
